

<template>
  <el-affix :offset="0">
    <div class="bg-white  h-[64px] flex border-b border-slate-200" >
      <!-- 左边栏收缩、展开 -->
      <div class="w-[42px] h-[64px] cursor-pointer flex items-center justify-center text-gray-700 hover:bg-gray-200" @click="handleMenuWidth">
        <el-icon>
          <fold v-if="menuStore.menuWidth === '300px'"></fold>
          <Expand v-else></Expand>
        </el-icon>
      </div>



      <!-- 右边容器，通过 ml-auto 让其在父容器的右边 -->
      <div class="ml-auto flex" style="float: right">
        <!-- 点击刷新页面       -->
        <el-tooltip class-name="box-item" effect="dark" content="刷新" placement="bottom" >
          <div class="w-[42px] h-[64px] cursor-pointer flex items-center justify-center text-gray-700 mr-2 hover:bg-gray-200" @click="handleRefresh">
            <el-icon>
              <Refresh />
            </el-icon>
          </div>
        </el-tooltip>

        <!-- 点击全屏展示 -->
        <el-tooltip class-name="box-item" effect="dark" content="全屏" placement="bottom" >
          <div class="w-[42px] h-[64px] cursor-pointer flex items-center justify-center text-gray-700 mr-2 hover:bg-gray-200" @click="toggle">
            <el-icon>
              <FullScreen v-if="!isFullscreen"></FullScreen>
              <Aim v-else></Aim>
            </el-icon>
          </div>
        </el-tooltip>

        <el-tooltip  class-name="box-item"  effect="dark" content="跳转前台" placement="bottom">
          <div class="w-[42px] h-[64px] cursor-pointer flex items-center justify-center text-gray-700 hover:bg-gray-200"
               @click="router.push('/')">
            <el-icon>
              <Monitor />
            </el-icon>
          </div>
        </el-tooltip>


        <!-- 登录用户头像         -->
        <el-dropdown class="flex items-center justify-center" @command="handleCommand">
          <span class="el-dropdown-link flex items-center justify-center text-gray-700 text-xs">
            <el-avatar class="mr-2" :size="25" src="https://i.pinimg.com/736x/6a/4d/c7/6a4dc7eee2ba598b009fe6b29632b4e8.jpg" />
            {{ userStore.userInfo.username }}
            <el-icon  class="el-icon--right">
              <arrow-down/>
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="updatePassword">修改密码</el-dropdown-item>
              <el-dropdown-item command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

        <!--修改密码        -->
        <!--        <el-dialog v-model="dialogVisible" title="修改密码" width="40%" :draggable="true" :close-on-click-modal="false" :close-on-press-escape="false">
                  <el-form ref="formRef" :rules="rules" :model="form">
                    <el-form-item label="用户名" prop="username" label-width="120px">
                      <el-input size="large" v-model="form.username" placeholder="请输入用户名" clearable  disabled/>
                    </el-form-item>
                    <el-form-item label="密码" prop="password" label-width="120px">
                      <el-input type="password" size="large" v-model="form.password" placeholder="请输入密码" clearable show-password/>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="rePassword" label-width="120px">
                      <el-input type="password" size="large" v-model="form.rePassword" placeholder="请确认密码" clearable show-password/>
                    </el-form-item>
                  </el-form>
                  <template #footer>
                    <span class="dialog-footer">
                      <el-button @click="dialogVisible = false">取消</el-button>
                      <el-button type="primary" @click="onSubmit">提交</el-button>
                    </span>
                  </template>
                </el-dialog>-->
        <form-dialog ref="formDialogRef" title="修改密码" @submit="onSubmit">
          <el-form ref="formRef" :rules="rules" :model="form">
            <el-form-item label="用户名" prop="username" label-width="120px">
              <el-input size="large" v-model="form.username" placeholder="请输入用户名" clearable  disabled/>
            </el-form-item>
            <el-form-item label="密码" prop="password" label-width="120px">
              <el-input type="password" size="large" v-model="form.password" placeholder="请输入密码" clearable show-password/>
            </el-form-item>
            <el-form-item label="确认密码" prop="rePassword" label-width="120px">
              <el-input type="password" size="large" v-model="form.rePassword" placeholder="请确认密码" clearable show-password/>
            </el-form-item>
          </el-form>
        </form-dialog>
      </div>

    </div>

  </el-affix>
</template>
<script setup>
// 引入了用户 Store
import {ref,reactive,watch } from "vue";
import {userUserStore} from "@/stores/user.js";
import { useRouter } from "vue-router";


import {ArrowDown, Fold, FullScreen, Expand, Aim, Refresh, Monitor} from "@element-plus/icons-vue";
import {useMenuStore} from "@/stores/menu";

// 引入 useFullscreen
import {useFullscreen} from "@vueuse/core";
import {showMessage,showModel} from "@/composables/utils.js";

import {updateAdminPassword} from "@/api/admin/user.js";

import FormDialog from "@/components/FormDialog.vue";


// 引入了菜单 store
const menuStore = useMenuStore()
// 引入了用户 Store
const userStore = userUserStore()
//引入路由跳转
const router = useRouter()
// isFullscreen 表示当前是否处于全屏；toggle 用于动态切换全屏、非全屏
const { isFullscreen,toggle  } = useFullscreen()
const handleMenuWidth = () => {
  //动态设置菜单宽带大小
  menuStore.handleMenuWidth()
}


//刷新页面
const handleRefresh = ()=> location.reload()

//是否展示弹出对话框
//const dialogVisible = ref(false)
const formDialogRef = ref(null);

//下拉菜单处理
const handleCommand = (command)=>{
  if(command ==='updatePassword'){
    //dialogVisible.value = true
    formDialogRef.value.open()
    //form.username = userStore.userInfo.username
  }else if(command==='logout'){
    logout()
  }
}
//退出登录
function logout(){
  showModel('是否确认退出登录？').then(()=>{
    userStore.logout()
    showMessage('退出登录成功！')
    //跳转到登录页
    router.push('/login')
  })
}

//更换密码form表单
const formRef = ref(null)
const  form = reactive({
  username: userStore.userInfo.username || '',
  password: '',
  rePassword: ''
})
//校验规则
const rules = {
  username: [
    { required: true,message:'用户名不能为空',trigger:'blur' }
  ],
  password: [
    { required: true,message:'密码不能为空',trigger:'blur' }
  ],
  rePassword: [
    { required: true,message:'确认密码不能为空',trigger:'blur' }
  ],
}

//更改密码提交
const onSubmit = ()=>{
  formRef.value.validate((valid)=>{
    if(!valid){
      //showMessage('表单验证不通过','warning')
      return false
    }
    if(form.password !== form.rePassword){
      showMessage('两次密码输入不一致，请检查！','warning')
      return false
    }
    formDialogRef.value.showBtnLoading()
    updateAdminPassword(form).then((res)=>{
      console.log('更改密码查看')
      if(res.success === true){
        showMessage('密码重置成功，请重新登录！')
        userStore.logout()
        //dialogVisible.value=false
        formDialogRef.value.close()
        router.push('/login')
      }else {
        let errorMsg = res.message
        showMessage(errorMsg,'error')
      }

    }).finally(()=>{
      formDialogRef.value.closeBtnLoading()
    })
  })
}

// 监听 Pinia store 中的某个值的变化
watch(()=> userStore.userInfo.username,(newValue,oldValue)=>{
  // 可以在这里执行任何你需要的逻辑
  // 重新将新的值，设置会 form 对象中
  form.username = newValue
})

</script>
<style scoped>

</style>
